<template>
  <div class="pie_container">
    <div
      ref="echart"
      class="first"
    ></div>
    <div
      ref="echart2"
      class="second"
    ></div>
    <div
      ref="echart3"
      class="three"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
    this.initEchart2();
    this.initEchart3();
  },
  methods: {
    initEchart() {
      let echart = this.$echarts.init(this.$refs.echart);
      let option = {
        title: {
          text: '饼状图-常规',
        },
        legend: {},
        series: [
          {
            type: 'pie',
            name: '水果销量',
            label: {
              //标题设置
              show: true, //显示名称
              formatter: (args) => {
                let name = args.name; //数据名，类目名
                let value = args.value; //传入的原始数据项
                let percent = args.percent; //百分比
                return (
                  '水果：' + name + '，销量' + value + '，占比：' + percent
                );
              },
            },
            // radius: '100', //饼图的半径
            radius: '60%', //饼图的半径，
            selectedMode: 'single', //选中之后的效果【'single'，'multiple'，'series'】
            selectedOffset: 20, //选中扇区的偏移距离。
            data: [
              {
                value: 335,
                name: 'Apple',
              },
              {
                value: 310,
                name: 'Grapes',
              },
              {
                value: 234,
                name: 'Pineapples',
              },
              {
                value: 135,
                name: 'Oranges',
              },
              {
                value: 1548,
                name: 'Bananas',
              },
            ],
          },
        ],
      };
      echart.setOption(option);
    },
    initEchart2() {
      let echart = this.$echarts.init(this.$refs.echart2);
      let option = {
        title: {
          text: '饼状图-圆环',
        },
        legend: {},
        series: [
          {
            type: 'pie',
            name: '水果销量',
            label: {
              //标题设置
              show: true, //显示名称
              formatter: (args) => {
                let name = args.name; //数据名，类目名
                let value = args.value; //传入的原始数据项
                let percent = args.percent; //百分比
                return (
                  '水果：' + name + '，销量' + value + '，占比：' + percent
                );
              },
            },
            // radius: '100', //饼图的半径
            // radius: '80%', //饼图的半径，
            radius: ['30%', '60%'], //数组的第一项是内半径，第二项是外半径
            selectedMode: 'multiple', //选中之后的效果【'single'，'multiple'，'series'】
            selectedOffset: 10, //选中扇区的偏移距离。
            data: [
              {
                value: 335,
                name: 'Apple',
              },
              {
                value: 310,
                name: 'Grapes',
              },
              {
                value: 234,
                name: 'Pineapples',
              },
              {
                value: 135,
                name: 'Oranges',
              },
              {
                value: 1548,
                name: 'Bananas',
              },
            ],
          },
        ],
      };
      echart.setOption(option);
    },
    initEchart3() {
      let echart = this.$echarts.init(this.$refs.echart3);
      let option = {
        title: {
          text: '饼状图-南丁格尔图',
        },
        legend: {},
        series: [
          {
            type: 'pie',
            name: '水果销量',
            label: {
              //标题设置
              show: true, //显示名称
              formatter: (args) => {
                let name = args.name; //数据名，类目名
                let value = args.value; //传入的原始数据项
                let percent = args.percent; //百分比
                return (
                  '水果：' + name + '，销量' + value + '，占比：' + percent
                );
              },
            },
            roseType: 'radius', //是否展示成南丁格尔图，通过半径区分数据大小['radius'、'area']
            radius: '60%', //饼图的半径，
            selectedMode: 'series', //选中之后的效果【'single'，'multiple'，'series'】
            selectedOffset: 10, //选中扇区的偏移距离。
            data: [
              {
                value: 335,
                name: 'Apple',
              },
              {
                value: 310,
                name: 'Grapes',
              },
              {
                value: 234,
                name: 'Pineapples',
              },
              {
                value: 135,
                name: 'Oranges',
              },
              {
                value: 1548,
                name: 'Bananas',
              },
            ],
          },
        ],
      };
      echart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pie_container {
  height: 100%;
  .first {
    height: 33%;
  }
  .second {
    height: 33%;
  }
  .three {
    height: 33%;
  }
}
</style>